<template>
    <div class="main el-box-init el-bkgd-white el-pd-20">
        <!-- 操作按钮 -->
        <div class="table-btn el-pd-b-20">
            <!-- <el-button
                type="primary"
                v-if="isAuth('INFO_ARTICLE_TALK_ADD')"
                @click="onAddOrReply()"
            >
                <el-icon class="table-icon"><plus /></el-icon>
                新增
            </el-button> -->
            <el-button
                type="danger"
                v-if="allDelBtnVisible && isAuth('INFO_ARTICLE_TALK_DEL')"
                @click="onDel()"
            >
                <el-icon class="table-icon"><delete /></el-icon>
                批量删除
            </el-button>
        </div>

        <!-- 表格 -->
        <el-table
            :data="list"
            border
            stripe
            @selection-change="handleSelectionChange"
            :row-style="showTr"
        >
            <el-table-column type="selection" width="40" />

            <el-table-column prop="id" label="ID" width="80">
                <template #default="scope">
                    <div class="name-and-icon" :class="'aname' + scope.row.level">
                        <span
                            class="icon"
                            v-if="toggleIconShow(0, scope.row)"
                            @click="toggle(scope.$index)"
                        >
                            <el-icon>
                                <minus v-show="scope.row.expanded" />
                                <plus v-show="!scope.row.expanded" />
                            </el-icon>
                        </span>
                        <span>
                            {{ scope.row.id }}
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="article_id" label="文章id"> </el-table-column>

            <el-table-column prop="name" label="昵称">
                <template #default="{ row }">
                    {{ row.name }}
                    <span v-if="row.master"> (博主) </span>
                </template>
            </el-table-column>

            <el-table-column prop="content" label="留言"> </el-table-column>

            <el-table-column prop="reply_name" label="被回复人">
                <template #default="{ row }">
                    {{ row.reply_name }}
                    <span v-if="row.reply_master"> (博主) </span>
                </template>
            </el-table-column>

            <el-table-column prop="reply_content" label="被回复留言"> </el-table-column>
            <el-table-column prop="mail" label="邮件"> </el-table-column>
            <el-table-column prop="url" label="网址"> </el-table-column>

            <el-table-column prop="created_time" label="日期" width="100">
                <template #default="{ row }">
                    {{ formatTime(row.created_time) }}
                </template>
            </el-table-column>

            <el-table-column label="操作" :width="$defaultActionWidth" align="center" fixed="right">
                <template #default="{ row }">
                    <el-button
                        type="warning"
                        v-if="isAuth('INFO_ARTICLE_TALK_REPLY')"
                        @click="onAddOrReply(row.id)"
                    >
                        <el-icon class="table-icon"><chat-line-round /></el-icon>
                        回复
                    </el-button>
                    <el-button
                        type="danger"
                        v-if="isAuth('INFO_ARTICLE_TALK_DEL')"
                        @click="onDel(row.id)"
                    >
                        <el-icon class="table-icon"><delete /></el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格分页 -->
        <el-pagination
            :currentPage="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            background
            :layout="layout"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />

        <!-- 新增/回复 -->
        <add-or-reply ref="addRefs" />
    </div>
</template>

<script>
import { getCurrentInstance, ref, reactive, toRefs } from 'vue';
import { adminInfoArticleTalk as Api } from 'api';
import AddOrReply from './add-or-reply.vue';

export default {
    components: {
        AddOrReply
    },
    setup() {
        const { proxy } = getCurrentInstance();
        // 表格全选
        let allDelBtnVisible = ref(false);
        // 表格
        let table = reactive({
            loading: false,
            rowId: 0,
            list: [],
            selectIds: [],
            currentPage: proxy.$config.pagination.currentPage, // 默认页
            pageSize: proxy.$config.pagination.pageSize, // 每页多少条
            pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
            layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
            total: 0 // 总条数
        });

        // 获取列表
        const getList = async (pid = 0) => {
            let article_id = proxy.$route.query.article_id;
            let params = { page: table.currentPage, per_page: table.pageSize };

            if (article_id) params.article_id = article_id;

            const { code, data, msg } = await proxy.$http.get(Api.getList, { params });

            if (code == 200) {
                table.list = proxy.$utils.getTreeToArray(data.list, null, null, false); // 按可伸展处理分类
                table.total = data.total;

                if (pid != '') {
                    getIdToPid(table.list, pid, []);
                }
            }
        };
        // 显示行
        const showTr = (data, index) => {
            let show = data.row.parent ? data.row.parent.expanded && data.row.parent.show : true;
            data.row.show = show;
            return show ? '' : 'display: none;';
        };
        // 点击展开和关闭的时候，图标的切换
        const toggleIconShow = (index, row) => {
            if (row.childrens && row.childrens.length > 0) {
                return true;
            }

            return false;
        };
        // 展开下级
        const toggle = (trIndex) => {
            let row = table.list[trIndex];
            row.expanded = !row.expanded;
        };
        // 获取当前编辑ID的所有父ID，更新表格根据得到的父ID展开，方便下次定位添加
        const getIdToPid = (list, pid) => {
            list.forEach((obj, index) => {
                if (obj.id == pid) {
                    toggle(index);

                    if (obj.childrens) {
                        getIdToPid(list, obj.pid);
                    }
                }
            });
        };
        // 表格全选
        const handleSelectionChange = (rows) => {
            table.selectIds = rows;
            allDelBtnVisible.value = table.selectIds.length ? true : false;
        };
        // 删除回复
        const onDel = async (id) => {
            if (!id) id = table.selectIds.map((item) => item.id).join(',');

            // 确认删除
            const confirm = await proxy.$msgBox.confirm({
                cancel: true
            });

            if (confirm) {
                const { code, data, msg } = await proxy.$http.delete(Api.del, {
                    data: { id }
                });

                if (code === 200) {
                    proxy.$msg.success(msg);
                    getList();
                } else {
                    proxy.$msg.error(msg ? msg : data);
                }
            }
        };
        // 新增/回复
        const onAddOrReply = (id) => {
            proxy.$refs.addRefs.id = id;
            proxy.$refs.addRefs.visible = true; // 弹窗开关
        };
        // 每页多少条
        const handleSizeChange = (val) => {
            table.loading = true;
            table.currentPage = val;
            getList();
        };
        // 当前页
        const handleCurrentChange = (val) => {
            table.loading = true;
            table.currentPage = val;
            getList();
        };

        // 时间格式化
        const formatTime = (value) => {
            return proxy.$formatTime(value);
        };

        getList();

        return {
            ...toRefs(table),
            allDelBtnVisible,
            getList,
            showTr,
            toggleIconShow,
            toggle,
            handleSelectionChange,
            onDel,
            onAddOrReply,
            handleSizeChange,
            handleCurrentChange,
            formatTime
        };
    }
};
</script>
